<template>
	<view class="container">
		<navigationBar :myProperty="propertyInfo"></navigationBar>
		<view class="mailun-r-result-bg" :style="{backgroundImage:'url('+mailun_r_result_bg+')'}">
			<view class="mailun-loading">
				<mai-lun-loading :lineList="lineList" :isShowWh="true"></mai-lun-loading>
			</view>
			<view class="rr-default-box" :style="{backgroundImage:'url('+mlrr_default_bg+')'}">
				<view class="ml-tip">???脉轮已经失衡</view>
				<image :src="mlrr_jxtzph" mode="" class="mlrr-jxtz"></image>
				<image :src="mailun_r_result_default_sj" mode="" class="mlrr-default-sj shake-img"></image>
				<view class="tip-zbh flex-cc">你的能量水晶已备妥!</view>
				<image :src="ml_pay_price_bg" mode="" class="ml-pay-price-bg"></image>
				<view class="bottom-btn" :style="{backgroundImage:`url(${mlr_start})`}" @click="payHandle">
					<view>查看分析 启动疗愈</view>
				</view>
				<view class="tip-bottom">{{'脉轮结果可为您保留24小时'}}</view>
				<view class="tip-bottom-2">{{'已有'+buyNum+'人获得水晶加持'}}</view>
			</view>

			<image class="mlr-male-ic" :src="uGender=='1'?mlr_male_ic:mlr_fmale_ic" />
			<view class="user-info">
				<view class="ui-name">{{getUserInfo.nickName}}</view>
				<view class="ui-time-title">测算时间：</view>
				<view class="ui-time">{{getTimeDate}}</view>
			</view>
		</view>
		<image :src="intro_shop" mode=""
			style="width: 100%;height: 3991rpx;display: block;position: relative;margin-top: -110rpx;z-index: 1;">
		</image>
	</view>
</template>

<script>
	import {
		orderPay
	} from '@/common/api/scl_api.js'
	import {
		removeEmptyProperty
	} from '@/common/utils/util.js'
	import {
		debounce
	} from 'lodash'
	import maiLunLoading from '@/components/mai-lun-loading/mai-lun-loading.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		editMerchandiseReport,
		getMerchandiseReportId
	} from '@/common/api/index_api.js'

	export default {
		props: {
			sclId: {
				type: String,
				default: '',
			},
			sclName: {
				type: String,
				default: '',
			},
			couponInfo: {
				type: Object,
				default: {},
			},
			sclInfo: {
				type: Object,
				default: {},
			}
		},
		data() {
			return {
				propertyInfo: {
					"bg_color": "transparent",
					"color": "#fff",
					"flag": 4,
					"name": "",
					"hasEntity": false,
				},
				loading: false,
				buyNum: 0,
				intro_shop: this.$imgWxkjUrl + '/product/intro_shop.png',
				ml_pay_price_bg: this.$imgWxkjUrl + '/product/ml_pay_price_bg.png',
				mlrr_take_after_btn: this.$imgWxkjUrl + '/product/resultNew/mlrr_take_after_btn.png',
				mailun_r_result_bg: this.$imgWxkjUrl + '/product/resultNew/mailun_r_result_bg.png',
				mailun_r_result_default_sj: this.$imgWxkjUrl + '/product/resultNew/mailun_r_result_default_sj.png',
				mlrr_detail_btn: this.$imgWxkjUrl + '/product/resultNew/mlrr_detail_btn.png',
				mlrr_detail_jt: this.$imgWxkjUrl + '/product/resultNew/mlrr_detail_jt.png',
				mlrr_fz: this.$imgWxkjUrl + '/product/resultNew/mlrr_fz.png',
				mlrr_default_bg: this.$imgWxkjUrl + '/product/ml_pay_bg_new.png',
				mlrr_jxtzph: this.$imgWxkjUrl + '/product/resultNew/mlrr_jxtzph.png',
				mlrr_take_after_bg: this.$imgWxkjUrl + '/product/resultNew/mlrr_take_after_bg.png',

				mlr_jt_left: this.$imgWxkjUrl + '/product/result/mlr_jt_left.png',
				mlr_jt_right: this.$imgWxkjUrl + '/product/result/mlr_jt_right.png',
				mlr_male_bg: this.$imgWxkjUrl + '/product/result/mlr_male_bg.png',
				mlr_male_ic: this.$imgWxkjUrl + '/product/result/mlr_male_ic.png',
				closeImg: this.$imgWxkjUrl + '/product/result/mlr_lock.png',
				mlr_fmale_bg: this.$imgWxkjUrl + '/product/result/mlr_fmale_bg.png',
				mlr_fmale_ic: this.$imgWxkjUrl + '/product/result/mlr_fmale_ic.png',
				mrl_retest: this.$imgWxkjUrl + '/product/result/mrl_retest.png',
				mlr_start: this.$imgWxkjUrl + '/product/afterPay/mlr_start_pay.png',
				bg1: this.$imgWxkjUrl + '/product/result/bg1.png',
				bg2: this.$imgWxkjUrl + '/product/result/bg2.png',
				bg3: this.$imgWxkjUrl + '/product/result/bg3.png',
				bg4: this.$imgWxkjUrl + '/product/result/bg4.png',
				detailBtn: this.$imgWxkjUrl + '/product/result/detail_btn.png',
				detailDown: this.$imgWxkjUrl + '/product/result/down.png',
				detailUp: this.$imgWxkjUrl + '/product/result/up.png',
				normalImg: this.$imgWxkjUrl + '/product/result/normal.png',
				activeImg: this.$imgWxkjUrl + '/product/result/active.png',
				lineList: [{
						background: 'linear-gradient( 180deg, #FFBBC1 0%, #EB1F2D 100%)',
						height: 60,
						text: '海底轮',
						textE: 'Root'
					},
					{
						background: 'linear-gradient( 180deg, #FFF7EA 0%, #FA9F10 100%)',
						height: 60,
						text: '脐轮',
						textE: 'Sacral'
					},
					{
						background: 'linear-gradient( 180deg, #FFF9BF 0%, #E4D52F 100%)',
						height: 60,
						text: '太阳轮',
						textE: 'Navel'
					},
					{
						background: 'linear-gradient( 180deg, #E4FFE9 0%, #7AD58B 100%)',
						height: 60,
						text: '心轮',
						textE: 'Heart'
					},
					{
						background: 'linear-gradient( 180deg, #CFF4FF 0%, #49C2E8 100%)',
						height: 60,
						text: '喉轮',
						textE: 'Throat'
					},
					{
						background: 'linear-gradient( 180deg, #BFCAFF 0%, #435BD4 100%)',
						height: 60,
						text: '眉心轮',
						textE: 'Third Eye'
					},
					{
						background: 'linear-gradient( 180deg, #FDFCFF 0%, #FDDAFC 100%)',
						height: 60,
						text: '顶轮',
						textE: 'Crown'
					}
				],
			}
		},
		computed: {
			...mapGetters('user', ['uGender']),
			getTimeDate() {
				return uni.$u.timeFormat(new Date().getTime(), 'yyyy年mm月dd日')
			}
		},
		methods: {
			getRandomNumber(min, max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			},
			payHandle() {
				if (this.loading) return
				this.loading = true
				const that = this
				orderPay({
					orderType: '18'
				}).then(res => {
					if (res.data.code == 200) {
						uni.requestPayment({
							provider: 'wxpay',
							service: 5,
							orderInfo: res.data.data.wr,
							timeStamp: res.data.data.wr.timeStamp,
							nonceStr: res.data.data.wr.nonceStr,
							package: res.data.data.wr.packageValue,
							signType: res.data.data.wr.signType,
							paySign: res.data.data.wr.paySign,
							success(res) {
								that.$emit('payOk')
							},
							fail(err) {
								that.$showToast('支付取消');
								setTimeout(() => {
									that.loading = false
								}, 300)
							}
						});
					} else {
						that.$showToast(res.data.message);
						setTimeout(() => {
							this.loading = false
						}, 300)
					}
				}).catch(e => {
					setTimeout(() => {
						this.loading = false
					}, 300)
				})

			}
		},
		created() {
			let buySjNum = uni.getStorageSync('buySjNum');
			if (buySjNum) {
				this.buyNum = buySjNum + this.getRandomNumber(100, 1000);
			} else {
				this.buyNum = 12863;
			}
			uni.setStorageSync('buySjNum', this.buyNum);
		},
		mounted() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#000000'
			})
		},
		beforeDestroy() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.ml-pay-price-bg {
		width: 235rpx;
		height: 86rpx;
		position: absolute;
		left: 58rpx;
		top: 370rpx;
	}

	.mailun-r-result-bg {
		width: 100%;
		height: 1624rpx;
		background-size: 100% 100%;
		position: relative;
	}

	.take-anim {
		width: 350rpx;
		height: 350rpx;
		display: block;
		animation: move 1.5s infinite;
	}

	@keyframes fadeScale {
		0% {
			transform: scale(0.5);
			opacity: 0;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes heartbeat {
		0% {
			transform: scale(1);
		}

		15% {
			transform: scale(1.05);
		}

		30% {
			transform: scale(1);
		}

		45% {
			transform: scale(1.05);
		}

		60% {
			transform: scale(1);
		}
	}

	@keyframes move {

		0%,
		50%,
		100% {
			transform: translateY(0);
		}

		25% {
			transform: translateY(-25rpx);
		}

		75% {
			transform: translateY(25rpx);
		}
	}

	.bottom-btn {
		width: 466rpx;
		height: 143rpx;
		font-weight: bold;
		font-size: 34rpx;
		color: #FFF4AE;
		letter-spacing: 3rpx;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 35rpx;
		box-sizing: border-box;
		margin: 0 auto;
		margin-top: -100rpx;
		position: relative;
		z-index: 1;
	}

	.bottom-btn-take-after {
		width: 460rpx;
		height: 126rpx;
		display: block;
		margin: 0 auto;
		font-weight: bold;
		font-size: 36rpx;
		color: #FFF4AE;
		letter-spacing: 3rpx;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 55rpx;
		padding-top: 24rpx;
		box-sizing: border-box;
	}


	.user-info {
		position: absolute;
		left: 20rpx;
		top: 251rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 50rpx;
		letter-spacing: 2rpx;
		z-index: 5;
	}



	.mlr-male-ic {
		width: 90rpx;
		height: 140rpx;
		top: 228rpx;
		right: 53rpx;
		position: absolute;
		animation: move 4s linear infinite;
		z-index: 5;
	}

	.mailun-loading {
		position: absolute;
		top: 360rpx;
		width: 100%;
		z-index: 3;
	}

	.rr-default-box {
		width: 750rpx;
		height: 826rpx;
		background-size: 100% 100%;
		position: absolute;
		left: 0;
		top: 736rpx;
		padding-top: 89rpx;
		box-sizing: border-box;
	}

	.mlrr-fz {
		width: 144rpx;
		height: 144rpx;
		display: block;
		margin: 0 auto;
	}

	.mlrr-detail-btn {
		width: 206rpx;
		height: 58rpx;
		background-size: 100% 100%;
		font-size: 28rpx;
		line-height: 40rpx;
		color: #FFFFFF;
		position: absolute;
		right: 71rpx;
		top: 58rpx;
		padding-left: 24rpx;
		padding-top: 7rpx;
		box-sizing: border-box;
	}

	.mlrr-detail-jt {
		position: absolute;
		right: 18rpx;
		top: 14rpx;
		width: 27rpx;
		height: 27rpx;
	}

	.ml-title {
		font-size: 40rpx;
		color: #9777F3;
		line-height: 56rpx;
		width: 100%;
		text-align: center;
		font-style: normal;
	}

	.tip-zbh {
		width: 271rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #FFFFFF 0%, #FF85EB 100%);
		box-shadow: 0px 2rpx 10rpx 0px #7E68D7;
		border-radius: 39rpx 39rpx 39rpx 0px;
		opacity: 0.72;
		font-weight: bold;
		font-size: 26rpx;
		color: #6A0E6E;
		position: absolute;
		right: 48rpx;
		top: 256rpx;
	}

	.tip-bottom {
		width: 322rpx;
		font-weight: bold;
		font-size: 26rpx;
		color: #fff;
		line-height: 37rpx;
		text-align: center;
		margin: 0 auto;
	}

	.tip-bottom-2 {
		width: 322rpx;
		font-weight: bold;
		font-size: 26rpx;
		color: #6050A1;
		line-height: 37rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 19rpx;
	}

	.ml-tip {
		width: 670rpx;
		font-weight: bold;
		font-size: 50rpx;
		color: #9777F3;
		line-height: 70rpx;
		text-align: center;
		margin: 0 auto;
	}

	.mlrr-jxtz {
		width: 670rpx;
		height: 76rpx;
		display: block;
		margin: 0 auto;
	}

	.mlrr-default-sj {
		width: 470rpx;
		height: 420rpx;
		display: block;
		margin: 0 auto;
		margin-top: -38rpx;
	}

	.shake-img {
		animation: heartbeat 1.5s infinite;
		/* 每 2s 循环一次 */
	}

	@keyframes shake {

		0%,
		50% {
			transform: translateX(0);
		}

		/* 前 50% 时间静止（1s）*/
		55%,
		60% {
			transform: translateX(-5px);
		}

		/* 抖动 */
		65%,
		70% {
			transform: translateX(5px);
		}

		75%,
		80% {
			transform: translateX(-5px);
		}

		85%,
		90% {
			transform: translateX(5px);
		}

		95%,
		100% {
			transform: translateX(0);
		}
	}

	.mlrr-default-sj-default {
		width: 350rpx;
		height: 350rpx;
		display: block;
		margin: 0 auto;
		margin-top: -38rpx;
		animation: fadeScale 2s ease-in-out forwards;
	}

	.mlri-shop-title {
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 45rpx;
		letter-spacing: 3rpx;
		width: 100%;
		text-align: center;
	}
</style>